import React, { useEffect, useState } from "react";
import dayjs from "dayjs";
import { Modal, Form, Row, Col, DatePicker } from "antd";
import XlSelect from "@/components/Form/XlSelect";
import { modalPropsType } from '@/constants/types';
import { useModel } from "@umijs/max";
import { dictConvertToSelect } from "@/utils/util";
import { fetchSettlementWeeksByYear } from "@/pages/BasicInfo/services";

const {Item} = Form;
const rules = [{required: true, message: '此项必填'}];
const layout = {
  labelCol: {
    span: 6
  }
}

const LineBatchUpdate = ({title, currentRow, onSubmit, loading, onCancel, visible, lineRow}: modalPropsType ) => {
  const [form] = Form.useForm();
  const {getDict} = useModel('dictModel');
  const years = getDict('year');
  const { settlementWeek } = useModel('settlementWeekModel');
  const {currentWeek, currentYear} = settlementWeek || {};
  const initValues = {year: currentYear || String(new Date().getFullYear()), week: currentWeek};

  const [weeks, setWeeks] = useState([]);

  const fetchWeekApis = async (year: string) => {
    const res = await fetchSettlementWeeksByYear({year});
    if (res?.length) {
      setWeeks(res?.map((v: string) => ({label: v, value: v})));
    }
  }

  const handleSubmit = async () => {
    const res = await form.validateFields();
    onSubmit({
      lineId: lineRow ? lineRow?.id : currentRow?.lineId,
      year: res?.year,
      week: res?.week,
      shipTime: res?.shipTime ? res?.shipTime.format('YYYY-MM-DD') : undefined,
      cutoffTime: res?.cutoffTime ? res?.cutoffTime.format('YYYY-MM-DD') : undefined,
    });
  }

  useEffect(() => {
    if (currentRow?.id) {
      form.setFieldsValue({
        year: currentRow?.year,
        week: currentRow?.week,
        shipTime: currentRow?.shipTime ? dayjs(currentRow?.shipTime, 'YYYY/MM/DD') : undefined,
        cutoffTime: currentRow?.cutoffTime ? dayjs(currentRow?.cutoffTime, 'YYYY/MM/DD') : undefined,
      });
    }
  }, [currentRow?.id]);

  useEffect(() => {
    fetchWeekApis(currentRow?.week || initValues.year);
  }, [currentRow?.year])
  
  return (
    <Modal
      maskClosable={false}
      title={title}
      open={visible}
      width="700px"
      confirmLoading={loading}
      onOk={handleSubmit}
      onCancel={onCancel}
     >
      <Form form={form} {...layout} initialValues={initValues}>
        <Row gutter={20}>
          <Col span={12}>
            <Item name="year" rules={rules} label="年份">
              <XlSelect
                allowClear
                disabled={!!currentRow}
                options={dictConvertToSelect(years)}
                onChange={(val: string) => fetchWeekApis(val)}
              />
            </Item>
          </Col>
          <Col span={12}>
            <Item name="week" rules={rules} label="周次">
              <XlSelect
                allowClear
                disabled={!!currentRow}
                options={weeks}
              />
            </Item>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={12}>
            <Item name="cutoffTime" rules={rules} label="截单时间">
              <DatePicker style={{width: 235}} />
            </Item>
          </Col>
          <Col span={12}>
            <Item name="shipTime" rules={rules} label="开船时间">
              <DatePicker style={{width: 235}} />
            </Item>
          </Col>
        </Row>
      </Form>
     </Modal>
  );
}
export default LineBatchUpdate;